<template>
    <div class="app-container">
        <el-dialog :title="title" :visible.sync="visible" width="1000px" v-if="visible" append-to-body
            :close-on-click-modal="false">
            <el-form ref="form" :model="formInline" :rules="rules" :label-width="labelWidth" :disabled="disabled"
                v-loading="loading" element-loading-text="识别中">
                <el-form-item label="营业执照：" prop="businessLicenseImg" ref="businessLicenseImgRef" :key="1">
                    <ImageUploadMore :limit="1" :fileSize="20" @successImg="getBusinessLicenseImg"
                        :value="formInline.businessLicenseImg">
                    </ImageUploadMore>
                </el-form-item>
                <el-form-item label="统一社会信用代码：" prop="businessLicenseNumber">
                    <el-input v-model="formInline.businessLicenseNumber" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="企业名称：" prop="merchantName">
                    <el-input v-model="formInline.merchantName" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="法人名称：" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="注册地址：" prop="address">
                    <el-input v-model="formInline.address" placeholder="请输入" :style="{ width: inputWidth }"></el-input>
                </el-form-item>
                <el-form-item label="企业类别：" prop="merchantType">
                    <el-select v-model="formInline.merchantType" placeholder="请选择" filterable
                        :style="{ width: inputWidth }">
                        <el-option v-for="item in merchantOptions" :key="item.id" :label="item.value" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="成立日期：" prop="businessLicenseStartDate">
                    <el-date-picker v-model="formInline.businessLicenseStartDate" type="date" placeholder="选择日期"
                        format="yyyy.MM.dd" value-format="yyyy.MM.dd" :clearable="false" :style="{ width: inputWidth }">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="经营期限：" prop="businessLicenseEndDate">
                    <el-radio-group v-model="radiodDate">
                        <el-radio :label="'1'">期限</el-radio>
                        <el-date-picker v-model="formInline.qxDate" type="date" placeholder="选择日期" format="yyyy.MM.dd"
                            style="width: 208px;" value-format="yyyy.MM.dd" :clearable="false"
                            :disabled="radiodDate == '2' ? true : false" @change="qxDateChange">
                        </el-date-picker>
                        <el-radio :label="'2'" style="margin-left: 10px;">长期</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="注册资金：" prop="registeredFund" v-if="formInline.merchantType == '1'">
                    <el-input v-model="formInline.registeredFund" placeholder="请输入"
                        :style="{ width: inputWidth }"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" :loading="sumitLoading">确认更换</el-button>
                <el-button @click="cancel" v-if="!disabled">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import {
    getToken
} from "@/utils/auth";
import {
    businessLicenseRenew,
} from "@/api/merchants";
import {
    licenseInfo, watermarkUploadFile
} from "@/api/chainManagement";
export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    props: {

    },
    data() {
        var checkBusinessLicenseEndDate = (rule, value, callback) => {
            if (this.radiodDate == '1' && (value === '' || value == undefined)) {
                callback(new Error('请选择经营期限'));
            } else {
                callback();
            }
        };
        return {
            labelWidth: '150px',
            inputWidth: '320px',
            dialogVisible: false, //导入失败弹窗
            loading: false,
            sumitLoading: false,
            importMessage: '', //导入失败原因
            id: '', //
            // 是否禁用表单
            disabled: false,
            // 弹出层标题
            title: "更换营业执照",
            // 是否显示弹出层
            visible: false,
            radiodDate: '1',//经营期限类型 1：期限  2：长期
            merchantId: '',//
            formInline: {
                watermarkBusinessLicenseImg: '',//营业执照图片(水印营业执照)
                businessLicenseImg: '',//营业执照图片
                businessLicenseNumber: '',//营业执照号
                merchantName: '',//企业名称
                name: '',//法人姓名
                address: '',//注册地址
                merchantType: '',//企业类型（1 企业 2个人）
                businessLicenseStartDate: '',//营业执照成立日期
                businessLicenseEndDate: '',//营业执照经营期限
                qxDate: '',//经营期限(校验用)
                registeredFund: '',//注册资金
            },
            rules: {
                businessLicenseImg: [{
                    required: true,
                    message: '请上传营业执照',
                    trigger: ['blur', 'change']
                }],
                businessLicenseNumber: [{
                    required: true,
                    message: '请输入营业执照号',
                    trigger: ['blur', 'change']
                }],
                merchantName: [{
                    required: true,
                    message: '请输入企业名称',
                    trigger: ['blur', 'change']
                }],
                name: [{
                    required: true,
                    message: '请输入法人姓名',
                    trigger: ['blur', 'change']
                }],
                address: [{
                    required: true,
                    message: '请输入注册地址',
                    trigger: ['blur', 'change']
                }],
                merchantType: [{
                    required: true,
                    message: '请选择企业类别',
                    trigger: ['blur', 'change']
                }],
                businessLicenseStartDate: [{
                    required: true,
                    message: '请选择成立日期',
                    trigger: ['change', 'blur']
                }],
                businessLicenseEndDate: [{
                    required: true,
                    // message: '请选择经营期限',
                    validator: checkBusinessLicenseEndDate,
                    trigger: ['change', 'blur']
                }],
                registeredFund: [{
                    required: true,
                    message: '请输入注册资金',
                    trigger: ['blur', 'change']
                }],
            },
            merchantOptions: [],
        };
    },
    created() {

    },
    methods: {
        //获取字典
        getDict() {
            var dictType = "merchant_type";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.merchantOptions = res.result[0].dictList;
                })
                .finally(() => {
                });
        },
        /** 打开弹框 */
        open(id) {
            this.getDict()
            this.reset();
            this.merchantId = id
            this.visible = true
            //   this.fileData.applyId = id
            //   this.visible = true
            //   if(insType == 1){
            //     this.lableText = '每人获CoCo赠数量'
            //   }else if(insType == 2){
            //     this.lableText = '每人获椰分赠数量'
            //   }
        },
        // 取消按钮
        cancel() {
            this.visible = false;
            this.reset();
        },
        // 表单重置
        reset() {
            // 子表选中数据
            this.sumitLoading = false
            this.formInline = {
                watermarkBusinessLicenseImg: '',//营业执照图片(水印营业执照)
                businessLicenseImg: '',//营业执照图片
                businessLicenseNumber: '',//营业执照号
                merchantName: '',//企业名称
                name: '',//法人姓名
                address: '',//注册地址
                merchantType: '',//企业类型（1 企业 2个人）
                businessLicenseStartDate: '',//营业执照成立日期
                businessLicenseEndDate: '',//营业执照经营期限
                qxDate: '',//经营期限(校验用)
                registeredFund: '',//注册资金
            }
        },
        //获取营业执照
        getBusinessLicenseImg(e, file) {
            this.formInline.businessLicenseImg = e
            let data = new FormData();
            if (file == undefined) {
                return
            }
            data.append("file", file.raw); // 文件对象
            watermarkUploadFile(data) //获取水印图片
                .then((res) => {
                    this.formInline.watermarkBusinessLicenseImg = res.result.url;
                })
                .catch(() => { });
            this.$refs['businessLicenseImgRef'].clearValidate();
            if (this.formInline.businessLicenseImg != '') {
                var params = {
                    url: this.formInline.businessLicenseImg
                }
                this.loading = true
                licenseInfo(params).then(res => {
                    if (res.result.businessLicenseEndDate == '长期') {
                        this.radiodDate = '2'
                        this.formInline.qxDate = ''
                        this.formInline.businessLicenseEndDate = '长期'
                    } else {
                        this.radiodDate = '1'
                        this.formInline.qxDate = res.result.businessLicenseEndDate
                    }
                    this.formInline = {
                        ...this.formInline,
                        ...res.result
                    }
                    // this.$set(this.formInline,)
                    this.$forceUpdate()
                    this.loading = false
                }).catch(()=>{
                    this.loading = false
                })
            }
        },
        //经营期限选择
        qxDateChange() {
            this.formInline.businessLicenseEndDate = this.formInline.qxDate
        },
        /** 执行按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    let data = {
                        merchantId: this.merchantId,
                        ...this.formInline
                    }
                    this.sumitLoading = true
                    businessLicenseRenew(data).then(response => {
                        this.$message.success('操作成功');
                        this.cancel();
                        this.$emit('success')
                    }).catch(() => {
                        this.sumitLoading = false;
                    });
                }
            });
        },
    }
};

</script>
<style scoped>
.main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
}

.icon_yes {
    font-size: 28px;
    color: #67c23a;
}

.img_list {
    display: flex;
    flex-wrap: wrap;
}

.img_list_box {
    display: flex;
    flex-wrap: wrap;
}

.img_list_box_demo {
    margin-right: 20px;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.demo_image_preview {
    border: 1px dashed #d9d9d9;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
}


.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 1px dashed #d9d9d9;
}

.refuse_box {
    margin: 0 0 20px 20px;
}
</style>
  